<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>弹层消息列表</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<link rel="stylesheet" href="css/public.css" media="all">
	</head>

	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">
				<div class="layui-tab layui-tab-brief">
				  <ul class="layui-tab-title" style="padding-left: 60px;">
				    <li class="layui-this">未读<span class="layui-badge" id="badge" style="display: none;"></span></li>
				    <li>已读</li>
				  </ul>
				  <div class="layui-tab-content">
				    <div class="layui-tab-item layui-show">
				    	<ul class="layui-timeline" id="msgline"></ul>
				    </div>
				    <div class="layui-tab-item">
				    	<ul class="layui-timeline" id="msgline2"></ul>
				    </div>
				  </div>
				</div>
			</div>
		</div>
		<script src="js/Global.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="lib/jquery-3.4.1/jquery-3.4.1.min.js" ></script>
		<script src="layui/layui.js" charset="utf-8"></script>
		<script>
			layui.use(['form','element'], function() {
				var $ = layui.jquery,
					form = layui.form;
				var element = layui.element;
				$.post(globalData.server + "public/getUnreadMessages", {
					"mesreceiver":globalData.getUid()
				}, function(obj) {
					if(obj.count > 0) {
						$("#badge").css("display",'');
						$("#badge").html(obj.count);
						for(var i = 0; i < obj.data.length; i++) {
							$("#msgline").append("<li class='layui-timeline-item'><i class='layui-icon layui-timeline-axis'>&#xe63f;</i><div class='layui-timeline-content layui-text'><h3 class='layui-timeline-title'>"+layui.util.toDateString(obj.data[i].messendtime,'yyyy年MM月dd日 HH:mm:ss')+"</h3><p>发送消息者: " +obj.data[i].senderName+ "<br/>学生姓名: " +obj.data[i].stuname+ " <br/>消息详情内容：" +obj.data[i].mescontent+ "<br/><button class='layui-btn layui-btn-xs' onclick='ss("+obj.data[i].mesid+")'>◕‿-✌点击进行阅读消息✌-‿◕</button></p></div></li>");
						}
					}
				}, "json");
				$.post(globalData.server + "public/getReadMessages", {
					"mesreceiver":globalData.getUid()
				}, function(obj) {
					if(obj.count > 0) {
						for(var i = 0; i < obj.data.length; i++) {
							$("#msgline2").append("<li class='layui-timeline-item'><i class='layui-icon layui-timeline-axis'>&#xe63f;</i><div class='layui-timeline-content layui-text'><h3 class='layui-timeline-title'>"+layui.util.toDateString(obj.data[i].messendtime,'yyyy年MM月dd日 HH:mm:ss')+"</h3><p>发送消息者: " +obj.data[i].senderName+ "<br/>学生姓名: " +obj.data[i].stuname+ " <br/>消息详情内容：" +obj.data[i].mescontent+ " <br/><br/>⇗⇗⇗此消息已阅读！！！");
						}
					}
				}, "json");
			});
			function ss(ids){
					$.post(globalData.server+"/public/update",{
						"mesid":ids
					},function(obj){
						if (obj.count>0) {
							layer.msg("操作成功");
							setTimeout(function(){
								window.location.reload();
							},1000);
						}else{
							layer.msg("操作失败")
						}
					},"json")
				}
		</script>

	</body>

</html>